本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～

什麼是SCSS

在開始介紹 SCSS 之前先來介紹一下 SASS，在前一篇的 CSS 選擇器 中相信大家寫久之後會有一個感想，每次都要寫一大串的選擇器真的是非常麻煩，有時候寫太快還會不小心寫錯，於是 SASS 就被創造出來了，而 SASS 的寫法有分為舊版的 縮排語法 以及新的 SCSS ，由於 SCSS 為 CSS 的超集合，此一特性不但讓 SCSS 能兼容全部的 CSS 語法也讓大多數的人都選擇寫 SCSS ，而且 Codepen 也有支援 SCSS 的寫法喔！只要在設定的地方選擇 CSS Preprocessor 就可以了。

範例

在開始介紹下方的範例之前，筆者提供一個非常適合練習 SCSS 的網站，大家不妨可以到這個網站練習看看 SCSS 的語法。

• 變數與運算

  變數最大的好處在於只要改變變數的值就可以直接改變全部有用到此變數的內容，最常被拿來當變數的就是顏色了，有了變數宣告就不用一直複製顏色代碼了，而且也不用擔心未來修改顏色時可能會忘記修改到某些元素的顏色。

  變數的宣告相當簡單，只要加個 $ 而 : 後方接上變數的值即可，寫法跟 CSS 很像，如下圖。

  

  宣告完之後只要在有需要引用此變數的地方寫上此變數的名稱即可，如下圖。

  

  既然都可以宣告變數了，當然也可以進行變數的四則運算，如下圖。

  

• 巢狀結構(Nesting)

  寫 SCSS 最厲害的地方就在於他的巢狀結構了，有了巢狀結構就不用花一堆心力寫一堆選擇器了，大家不妨可以猜猜看以下程式碼轉換成 CSS 後會長成什麼樣式，這邊附上轉換後的解答。

  .container {
    display: block;
  
    .box {
      width: 50px;
      height: 50px;
    }
  
    + .container2 {
      display: inline-block;
    }
  
    &:hover {
      color: red;
      cursor: pointer;
    }
  }
  

  可以發現巢狀結構的解析就是一層一層往下累加選擇器的 class ，如果沒有指定選擇器則預設為 空白 ，而 &: 這個符號就是給 偽類別 以及 偽元素 使用，這種寫法讓選擇器不再那麼麻煩而且也變得直觀許多。

• 匯入其他SCSS檔案(@import)

  SCSS 的檔案是可以互相被引用的，只要寫上 @import 'file.scss' 即可，引用的好處在於假如我有一個 base.scss 裡面就是定義一些基本的 style ，之後在寫其他的 SCSS 時就不用重新在寫一次基本的樣式。

• 混合(@mixin)

  混合就如其名，就是要讓一個自訂的樣式可以融入指定的元素，概念有點像是變數但不一樣的是混合是要寫完整的樣式而非只有單純的值而已，也因此 @mixin 的樣式在轉換成 CSS 後是不會存在的，如果要引用混合所宣告的組合則需使用 @include，通常用於大量且基本的樣式以減少開發時的 CSS 程式碼， @mixin 寫法如下。

  @mixin block {
    display: block;
    width: 100px;
    height: 100px;
  }
  
  .container {
    @include block;
  }
  

  轉換的結果可以參考這裡。

• 延展(@extend)

  延展的概念跟混合可以說是一模一樣，不一樣的地方在於 @extend 只能用在已存在的 class ，這邊用選擇器的觀念去思考的話可以把 @extend 想成逗號這個選擇器，所以轉換後樣式不但都會被保留而且都會共用一樣的樣式，這點就跟 @mixin 有著非常大的差別了， @extend 的寫法如下。

  .container {
    display: block;
    width: 100px;
    height: 100px;
  }
  
  .container2 {
    @extend .container;
    background-color: blue;
  }
  

  轉換後的結果可以參考這裡。

• 函式(@function)

  SCSS 也可以寫函式來進行簡單的運算，而且也具備一些基本的程式語法像是： @if 、 @return 、 @for 等等，而 SCSS 也內建了許多函式可以使用，詳細的函式庫可以參考這個網站， @function 的寫法如下。

  @function calc-margin($value) {
    @return $value * 2;
  }
  
  .container {
    margin: calc-margin(5);
  }
  

  轉換後的結果可以參考這裡。

總結

今天的範例就來把昨天的範例改寫成 SCSS 的寫法吧！寫習慣 SCSS 後真的會回不去原本的 CSS 寫法，巢狀結構不但讓 CSS 的可讀性變更高同時也讓選擇器不再過於冗長，未來在寫 CSS 時不妨利用 SCSS 來增加開發速度吧！